<template>
    <div>
        <el-select clearable style="width:100%" size="mini" v-model="myValue" placeholder="请选择" @change="change">
            <template v-for="(item, i) in options">
                <el-option
                    :label="item.text"
                    :value="item.id">
                </el-option>
            </template>
        </el-select>        
    </div>
</template>

<script>
module.exports = {
    data: function() {
        return {
            myValue: '',
            options: []
        }
    },
    created: function() {
        this.myValue = this.value;    
        this.options = this.build();
    },
    props: {
        value: String,
        map: Object
    },
    methods: {
        build: function() {
            var options = [];
            // options.push({
            //     id: '',
            //     text: '全选'
            // })
            var map = this.map;
            for(var key in map) {
                var value = map[key];
                options.push({
                    id: key,
                    text: value
                });
            }
            return options;
        },
        change: function(v) {
            // console.log('change', v);
            this.$emit('input', v)
        }
    },
    watch: {
        // 流入 value
        value: function() {
            if(this.value != this.myValue) {
                this.myValue = this.value;
            }
        },
        map: function() {
            this.options = this.build();
        }
    }
}
</script>